<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
    <link rel="stylesheet" href="css/user_chat.css">
    <script type="text/javascript" src="js/jquery-3.2.1.js"></script>
    <script type="text/javascript">
        $(function () {
            jQuery(".main_left_online ul").click(function () {
                 var Index = jQuery(this).index();
                 var onlineContent = jQuery(".main_conter_top_content");
                 jQuery(".main_left_online ul").css("background-color","#dedede");
                 var content = onlineContent.get(Index);
                 onlineContent.hide();
                 jQuery(content).show();
                 jQuery(this).css("background-color","#f6f6f6");
            })
        })
    </script>
</head>
<body>
<!--用户聊天-->
<div id="main">
    <div class="main_serach">
        <div align="center"><</div>
        <div><input type="text" placeholder="serache" /></div>
    </div>
    <div class="main_all">
        <div class="main_left">
            <div align="center" class="main_left_online">
                <ul>
                    <li><img src="img/test_you4.png"></li>
                    <li>Astray</li>
                    <li><img src="img/chat_icon_6.png"></li>
                </ul>
                <ul>
                    <li><img src="img/test_you4.png"></li>
                    <li>Astray</li>
                    <li><img src="img/chat_icon_6.png"></li>
                </ul>
                <ul>
                    <li><img src="img/test_you4.png"></li>
                    <li>Astray</li>
                    <li><img src="img/chat_icon_6.png"></li>
                </ul>
                <ul>
                    <li><img src="img/test_you4.png"></li>
                    <li>Astray</li>
                    <li><img src="img/chat_icon_6.png"></li>
                </ul>
                <ul>
                    <li><img src="img/test_you4.png"></li>
                    <li>Astray</li>
                    <li><img src="img/chat_icon_6.png"></li>
                </ul>
                <ul>
                    <li><img src="img/test_you4.png"></li>
                    <li>Astray</li>
                    <li><img src="img/chat_icon_6.png"></li>
                </ul>
                <ul>
                    <li><img src="img/test_you4.png"></li>
                    <li>Astray</li>
                    <li><img src="img/chat_icon_6.png"></li>
                </ul>
            </div>
        </div>
        <div class="main_conter">
            <div class="main_conter_top">
                <div class="main_conter_top_content">
                    <div class="main_conter_top_content_position">
                        <div class="main_conter_top_content_myself">
                            <div class="main_conter_top_content_myself_space"></div>
                            <div class="main_conter_top_content_size" style="float: right">
                                <div class="main_conter_top_content_img" style="float: right"><img src="img/test_you4.png"></div>
                                <div class="main_conter_top_content_size_content" style="float: right">
                                    <div style="float: right">
                                        <img src="img/chat_img_icon_10.png">
                                        <span>时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时
                                            间时间时间时间时间时间时间时间时间时间时间时间
                                                时间时间
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="main_conter_top_content_position">
                        <div class="main_conter_top_content_user">
                            <div class="main_conter_top_content_size" style="float:left">
                                <div class="main_conter_top_content_img" style="float:left"><img src="img/test_you4.png"></div>
                                <div class="main_conter_top_content_size_content" style="float:left">
                                    <div>时间</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="main_conter_top_content_position">
                        <div class="main_conter_top_content_myself">
                            <div class="main_conter_top_content_myself_space"></div>
                            <div class="main_conter_top_content_size" style="float: right">
                                <div class="main_conter_top_content_img" style="float: right"><img src="img/test_you4.png"></div>
                                <div class="main_conter_top_content_size_content" style="float: right">
                                    <div style="float: right">
                                        <img src="img/chat_img_icon_10.png">
                                        <span>时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间
                                    时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间
                                    </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="main_conter_top_content_position">
                        <div class="main_conter_top_content_user">
                            <div class="main_conter_top_content_size" style="float:left">
                                <div class="main_conter_top_content_img" style="float:left"><img src="img/test_you4.png"></div>
                                <div class="main_conter_top_content_size_content" style="float:left">
                                    <div>时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="main_conter_top_content_position">
                        <div class="main_conter_top_content_myself">
                            <div class="main_conter_top_content_myself_space"></div>
                            <div class="main_conter_top_content_size" style="float: right">
                                <div class="main_conter_top_content_img" style="float: right"><img src="img/test_you4.png"></div>
                                <div class="main_conter_top_content_size_content" style="float: right">
                                    <div style="float: right">
                                        <span>时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间
                                    时间时间
                                    </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="main_conter_top_content_position">
                        <div class="main_conter_top_content_user">
                            <div class="main_conter_top_content_size" style="float:left">
                                <div class="main_conter_top_content_img" style="float:left"><img src="img/test_you4.png"></div>
                                <div class="main_conter_top_content_size_content" style="float:left">
                                    <div>时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
            <div class="main_conter_bottom">
                <div class="main_conter_bottom_icon">
                    <ul>
                        <li><img src="img/chat_icon_1.png"></li>
                        <li><img src="img/chat_icon_2.png"></li>
                        <li><img src="img/chat_icon_5.png"></li>
                    </ul>
                    <ul>
                        <li><img src="img/chat_icon_4.png"></li>
                        <li><img src="img/chat_icon_3.png"></li>
                    </ul>
                </div>
                <div class="main_conter_bottom_content">
                    <textarea ></textarea>
                    <button type="button">send</button>
                </div>

            </div>

        </div>
        <div class="main_right">
            <div class="main_right_user" align="center">
                <div class="main_right_user_img">
                    <img src="img/text_img_4.jpg">
                </div>
                <div class="main_right_user_name">Astray</div>
            </div>
            <ul>
                <li>地区</li>
                <li>广东省广州市天河区五山街道</li>
            </ul>
            <ul>
                <li>个人简介</li>
                <li>阿斯顿发送到发手动阀手动阀阿斯蒂芬阿斯蒂芬按时阿斯蒂芬沙发安抚萨芬是大萨达啥地方阿斯蒂芬阿斯蒂阿斯蒂的</li>
            </ul>
            <ul>
                <li>生日</li>
                <li>1995-5-5</li>
            </ul>
            <ul>
                <li>性别</li>
                <li>男</li>
            </ul>
        </div>
    </div>
</div>
</body>
<script type="text/javascript">
    document.body.style.height=window.innerHeight+"px";
    window.onresize=function (){
        document.body.style.height=window.innerHeight+"px";
    }
</script>
</html>